<template>
	<view class="container">
		<view class="card-box">
			<view class="left">银行卡</view>
			<input class="right" type="text"  placeholder="请输入开户行名称" @input="inputbank" v-model="bank"/>
		</view>
		<view class="card-box">
			<view class="left">卡号</view>
			<input class="right" type="number"  placeholder="请输入银行卡号" @input="inputcard" v-model="card"/>
		</view>
		<view class="card-box">
			<view class="left">持卡人姓名</view>
			<input class="right" type="text"  placeholder="请输入持卡人姓名" @input="inputname" v-model="name"/>
		</view>
		<view class="confirm" :class="{'confirm-after':flag}" @click="bindcard">确认提现</view>
	</view>
</template>

<script>
	import {tiXian} from "../../api/balance.js"
	export default{
		data(){
			return{
				bank:'',
				card:'',
				name:'',
				flag:false,
				money:''
			}
		},
		onLoad(val) {
			// console.log(val)
			this.money = val.money
		},
		methods:{
			inputAll() {
				if (this.name.trim() != "" && this.card.trim() != "" && this.bank.trim() != "") {
					this.flag = true;
				} else {
					this.flag = false
				}
			},
			inputbank(){
				this.inputAll()
			},
			inputcard(){
				this.inputAll()
			},
			inputname(){
				this.inputAll()
			},
			bindcard() {
				if (this.bank.trim() == "") {
					this.msg("银行名称未填写", "none")
					return
				}
				if (this.card.trim() == "") {
					this.msg("卡号未填写", "none")
					return
				}
				if (this.name.trim() == "") {
					this.msg("姓名未填写", "none")
					return
				}
				this.post(tiXian,{
					user_id:uni.getStorageSync("userInfo").id,
					money:this.money,
					bank:this.bank,
					realname:this.name,
					card_num:this.card
				}).then(res => {
					if(res.code == 1){
						this.msg(res.msg)
						this.money=''
						this.bank=''
						this.name=''
						this.card=''
					}
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/balance/balance"
					})
				},1500)
			},
		}
	}
</script>

<style>
	.container{
		padding: 0 30rpx;
	}
	.card-box{
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #D7D7D7;
		padding-bottom: 10rpx;
		margin-top: 50rpx;
		
	}
	.left{
		width: 210rpx;
		font-size: 30rpx;
		font-weight: 300;
		color: #666666;
	}
	.right{
		font-size: 30Rpx;
		font-weight: 400;
		color: #333333;
	}
	.confirm{
		width: 460rpx;
		height: 88rpx;
		background: #008573;
		opacity: 0.3;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
		margin: 185rpx auto 0;
	}
	.confirm-after{
		background: #008573;
		
		opacity: 1;
	}
</style>
